<template>
  <view class="leader-detail-page" v-if="info">
    <view class="header">
      <image class="avatar" :src="info.avatar" mode="aspectFill" />
      <view class="meta">
        <view class="row1">
          <text class="name">{{ info.name }}</text>
          <text class="rate">{{ info.rating }}分</text>
        </view>
        <view class="row2">{{ info.store_name }}</view>
        <view class="row3">服务半径：{{ info.service_radius || 3000 }}米 · 佣金比率：{{ info.commission_rate || 10 }}%</view>
      </view>
    </view>

    <view class="card">
      <view class="cell">
        <text class="label">联系电话</text>
        <text class="val">{{ info.phone || '未提供' }}</text>
      </view>
      <view class="cell">
        <text class="label">门店地址</text>
        <text class="val">{{ info.address }}</text>
      </view>
    </view>

    <view class="ops">
      <button class="btn call" @tap="call">拨打电话</button>
      <button class="btn goods" @tap="viewGoods">查看推荐商品</button>
    </view>
  </view>
</template>

<script setup>
// 中文注释：团长详情
import { ref, getCurrentInstance } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { leaderApi } from '@/api/index.js'

const { proxy } = getCurrentInstance()

const info = ref(null)
const id = ref('')

const fetchInfo = async () => {
  try {
    const data = await leaderApi.getLeaderInfo(id.value)
    info.value = data
  } catch (e) {
    proxy?.$showToast?.('加载失败')
  }
}

const call = () => {
  if (!info.value?.phone) return uni.showToast({ title: '暂无电话', icon: 'none' })
  uni.makePhoneCall({ phoneNumber: String(info.value.phone) })
}

const viewGoods = () => {
  // 示例：跳转到商品列表页并传 leaderId，实际页面根据需要实现筛选
  proxy?.$showToast?.('示例入口，可在商品页按团长筛选')
}

onLoad((query) => {
  id.value = query?.id || ''
  fetchInfo()
})
</script>

<style scoped lang="scss">
.leader-detail-page { padding: 16rpx; min-height: 100vh; background: $uni-bg-color-grey; }
.header { display: flex; background: #fff; border-radius: 12rpx; padding: 16rpx; box-shadow: 0 12rpx 32rpx rgba(0,0,0,0.06); }
.avatar { width: 140rpx; height: 140rpx; border-radius: 8rpx; background: #eee; }
.meta { flex: 1; margin-left: 16rpx; }
.row1 { display: flex; justify-content: space-between; }
.name { font-size: 32rpx; color: #333; font-weight: 600; }
.rate { font-size: 24rpx; color: $uni-color-primary; }
.row2 { margin-top: 6rpx; color: #666; font-size: 26rpx; }
.row3 { margin-top: 6rpx; color: #999; font-size: 24rpx; }
.card { background: #fff; border-radius: 12rpx; margin-top: 12rpx; overflow: hidden; box-shadow: 0 12rpx 32rpx rgba(0,0,0,0.06); }
.cell { display: flex; justify-content: space-between; padding: 24rpx; border-bottom: 1px solid $uni-border-color; }
.cell:last-child { border-bottom: none; }
.label { color: #333; font-size: 28rpx; }
.val { color: #666; font-size: 26rpx; max-width: 460rpx; text-align: right; }
.ops { display: flex; gap: 16rpx; margin-top: 20rpx; }
.btn { flex: 1; height: 84rpx; line-height: 84rpx; border: 0; border-radius: 12rpx; font-size: 30rpx; }
.btn.call { background: #4CAF50; color: #fff; }
.btn.goods { background: $uni-color-primary; color: #fff; }
</style>
